<template>
    <div>
        <!-- 头部导航栏 -->
        <!-- @click-left="$router.back()" 返回上一页 -->
        <van-nav-bar   title="商品详情"  left-arrow @click-left="$router.back()"> 
            <template #right>
                <van-icon name="ellipsis" size="18" />
            </template>
         </van-nav-bar>
    </div>
    <!-- 商品内容 -->
    <div class="goodDetail">
        <img :src="info.goodsCoverImg" alt="">
        <p class="introdece">{{ info.goodsName }}</p>
        <p class="free">免邮费 顺丰快递</p>
        <span class="price">￥{{ info.sellingPrice }}</span>
        <div class="four">
            <span></span>
            <span>概述</span>|
            <span>参数</span>|
            <span>安装服务</span>|
            <span>常见问题</span>
            <span></span>
        </div>
        <div v-html="info.goodsDetailContent" ></div>
    </div>

    <!-- 底部内容 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot />
        <van-action-bar-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" :badge="store.cartNum" />
        <van-action-bar-button type="warning" text="加入购物车" @click="add" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute,useRouter } from "vue-router"
import { goodsDetail ,addGoods} from '@/api/index.js'
import {ref,reactive} from 'vue'
import { showSuccessToast, showFailToast } from 'vant';
import {useCart} from "@/store/cartStore.js"
// 使用仓库
let store = useCart()
// 使用路由
let route =useRoute();
let router = useRouter();
let info=reactive({})
let goods=reactive({})
let resultCode=ref('')
let message=ref('')
onMounted(()=>{
    console.log(route.params.productId);
    goodsDetail(route.params.productId).then(data=>{
        console.log(data.data);
        for(let key in data.data){
            info[key]=data.data[key]
        }
        // console.log(info);
        console.log(store.cartNum);
    })
})
// 添加到购物车
let add=()=>{
    // console.log(info.sellingPrice);
    addGoods(1,info.goodsId).then(data=>{
        console.log(data);
        for(let key in data){
            goods[key]=data[key]
        }
        if(goods.resultCode == 200){
            // 1）提示添加购物车成功
            showSuccessToast('添加成功');
            // 2 获取购物车数据
            store.getCartList()
        }else{
            console.log();
            showFailToast('已存在，无需重复添加');
        }

    })

    
  
}
</script>
<style lang="less">
.goodDetail{
    padding-bottom: 50px;
    img{
        width: 100%;
    }
    .introdece{
        font-size: 20px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .free{
        font-size: 15px;
        color: #999999;
        margin-left: 15px;
        margin-top: 5px;
    }
    .price{
        color: #F63515;
        margin-left: 15px;
    }
    .four{
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 16px;
        display: flex;
        justify-content: space-around;
    }
}
</style>